<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D转换</title>
    <style>
        .main{
            width: 100px;
            height: 100px;
            position: relative;
        }
        .main div{
            height: 50px;
            width: 50px;
            position: absolute;
        }
    </style>
</head>
<body>
<ul>
    <li>除了matrix rotate, 其他四个都有 xxxX xxxY 两个单独设置X和Y轴的函数</li>
    <li>
        <p>translate 位移</p>
        <style>
            .default {
                background: red;
            }
            .translate {
                background: blue;
                transform:translate(10px, 10px);
            }
        </style>
        <div class="main">
            <div class="default"></div>
            <div class="translate"></div>
        </div>
    </li>
    <li>
        <p>rotate 旋转</p>
        <style>
            .rotate {
                background: red;
                transform: rotate(45deg)
            }
        </style>
        <div class="main">
            <div class="rotate"></div>
        </div>
    </li>
    <li>
        <p>scale 缩放</p>
        <style>
            .default {
                background: red;
            }
            .scale {
                background: blue;
                transform:scale(.5, .5);
            }
        </style>
        <div class="main">
            <div class="default"></div>
            <div class="scale"></div>
        </div>
    </li>
    <li>
        <p>skew 倾斜</p>
        <style>
            .skew {
                background: red;
                transform: skew(15deg, 15deg)
            }
        </style>
        <div class="main">
            <div class="skew"></div>
        </div>
    </li>
    <li>
        <p>matrix 倾斜(正数左 负数右侧) 缩放(x y)  旋转  位移(x y)</p>
        <p>https://www.cnblogs.com/Ivy-s/p/6786622.html</p>

        <style>
            .matrix1 {
                background: red;
                transform:matrix(1,0,0,1,0,0);
            }
            .matrix2 {
                background: blue;
                transform: matrix(0.707,0.707,-0.707,0.707,0,0);
            }
        </style>
        <div class="main">
            <div class="matrix1"></div>
            <div class="matrix2"></div>
        </div>
    </li>
</ul>
</body>
</html>
